<ng-container *ngIf="dialogDisplay">
    <div class="overlay"></div>
    <span class="dialog-close material-icons" *ngIf="closeType==1" (click)="hide()" id="{{id}}-close">close</span>
    <div class="fixed-center dialog-box" id="{{id}}" [style.width]="width?width+'rem': ''" [style.height]="height?height+'rem': ''">
        <div *ngIf="header" class="dialog-header">
            <h3>{{header}}</h3>
            <span class="dialog-close material-icons" *ngIf="closeType==2" (click)="hide()" id="{{id}}-close-dialog">close</span>
        </div>
        <div class="dialog-content">
            <ng-content></ng-content>
        </div>
        <div *ngIf="footerBtns" class="dialog-footer">
            <div class="footer-content">
                <ng-container *ngFor="let btn of footerBtns">
                    <a *ngIf="btn.link" [routerLink]="btn.link" class="btn {{btn.styles}}">
                        <i class="coin material-icons" *ngIf="btn.icon">{{btn.icon}}</i>{{btn.text}}
                    </a>
                    <button *ngIf="btn.action" class="btn {{btn.styles}}" (click)="(btn.action)(btn)">
                        <i class="coin material-icons" *ngIf="btn.icon">{{btn.icon}}</i> {{btn.text}}
                    </button>
                </ng-container>
            </div>
        </div>
    </div>
</ng-container>
